<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="30%"
    :close-on-click-modal="false"
  >
    <el-form ref="userForm" label-width="80px" :model="user" :rules="rules">
      <el-form-item label="账号" prop="userName">
        <el-input v-model="user.userName" />
      </el-form-item>

      <el-form-item label="名称" prop="nickName">
        <el-input v-model="user.nickName" />
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="user.email" />
      </el-form-item>

      <el-form-item label="性 别" prop="sex">
        <el-radio-group v-model="user.sex">
          <el-radio label="0">男</el-radio>
          <el-radio label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="手机号码" prop="phoneNumber">
        <el-input v-model="user.phoneNumber" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addUser, getUser, updateUser } from '@/api/user/user'

export default {
  name: 'userEdit',
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      required: true
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      user: {
        userName: '',
        nickName: '',
        email: '',
        sex: '',
        phoneNumber: ''
      },
      loading: false,
      rules: {
        userName: [{ required: true, trigger: 'blur', message: '请输入账号' }],
        nickName: [{ required: true, trigger: 'blur', message: '请输入名称' }],
        email: [
          { required: false, trigger: 'blur', type: 'email', message: '请输入正确邮箱' }
        ],
        sex: [{ required: true, trigger: 'change', message: '请选择性别' }]
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    }
  },
  watch: {
    dialogVisible() {
      if (this.dialogVisible === true && this.type === 'edit' && this.id !== '') {
        getUser(this.id).then((res) => {
          this.user = res.data
        })
      }
    }
  },
  methods: {
    close() {
      this.$refs.userForm.clearValidate()
      this.$refs.userForm.resetFields()
      this.$emit('update:dialogVisible', false)
    },
    submit() {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.type === 'add') {
            // insert
            addUser(this.user)
              .then((res) => {
                this.success(res)
              })
              .catch(() => {
                this.loading = false
              })
          } else if (this.type === 'edit') {
            // update
            updateUser(this.user)
              .then((res) => {
                this.success(res)
              })
              .catch(() => {
                this.loading = false
              })
          }
        }
      })
    },
    success(res) {
      this.$notify({
        title: '成功',
        message: res.msg,
        type: 'success',
        duration: 2000,
        onClose: () => {
          this.$emit('success')
          this.loading = false
          this.close()
        }
      })
    }
  }
}
</script>

<style></style>
